<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>

<body>

<div id="test1">
  {{message}}
</div>

<script type="text/javascript">
  var test1 = new Vue({
    el:'#test1',
    data: {
      message: 'Hello'
    }
  })
</script>


<div id="test2">
  <span v-bind:title="message">
    将鼠标放在此处查看信息
  </span>
</div>

<script type="text/javascript">
  var test2 = new Vue({
    el:'#test2',
    data: {
      message: '页面加载于 ' + new Date()
    }
  })
</script>



<div id="test3">
  <p v-if="seen">能不能看见?</p>
</div>

<script type="text/javascript">
  var test3 = new Vue({
    el: '#test3',
    data:{
      seen: true
    }
  })
</script>


<div id="test4">
  <ol>
    <li v-for="todo in todos">
      {{todo.text}}
    </li>
  </ol>
</div>

<script type="text/javascript">
  var test4 = new Vue({
    el: '#test4',
    data: {
      todos:[
        {
          text: 'Test 1'
        },
        {
          text: 'Test 2'
        },
        {
          text: 'Test 3'
        }
      ]
    }
  })
</script>


<div id="test5">
  <p>{{message}}</p>
  <button @click="reverseChar">reverseChar</button>
</div>

<script type="text/javascript">
  var test5 = new Vue({
    el: '#test5',
    data: {
      message: 'Hello,World!'
    },
    methods: {
      reverseChar: function () {
        this.message = this.message.split('').reverse().join('')
      }
    }
  })
</script>


<div id="test6">
  <p>{{ message }}</p>
  <input v-model="message">
</div>

<script type="text/javascript">
  var test6 = new Vue({
    el:'#test6',
    data:{
      message: 'Test'
    }
  })
</script>


<div id="test7">
  <ol>
    <todo-item v-for="item in itemList" v-bind:todo="item">
    </todo-item>
  </ol>
</div>
<script type="text/javascript">
  Vue.component(
    'todo-item', {
        props:['todo'],
        template: '<li>{{ todo.text }}</li>'
    })
  var test7 = new Vue({
    el:'#test7',
    data:{
      itemList: [
        {
          text: '西红柿'
        },{
          text: '香菇'
        },{
          text: '皮蛋'
        }
      ]
    }
  })
</script>


<div id="test8">
  <button @click="showAlert">显示警告框</button>
</div>
<script type="text/javascript">
  var test8 = new Vue({
    el:'#test8',
    methods: {
      showAlert: function () {
        alert()
      }
  }
})
</script>


<script type="text/javascript">
  var data = {a : 1}
  
  var vm = new Vue({
    data:data
  })

  vm.a === data.a
  console.log(vm.a === data.a)
  vm.a = 2
  data.a
  console.log(data.a)

  data.a = 3
  console.log(vm.a)
</script>



<div id="test9">
  <p>Original Result : {{ message }}</p>
  <!-- <p>Reversed Result : {{ reverseChar() }}</p> -->
  <p>Time : {{ now() }}</p>
</div>

<script type="text/javascript">
  var test9 = new Vue({
    el: '#test9',
    data: {
      message: '上山打老虎'
    },
    // computed: {
    //   reverseChar: function () {
    //     return this.message.split('').reverse().join('')
    //   }
    // }
    methods: {
      reverseChar: function () {
        return this.message.split('').reverse().join('')
      }
    }
  })
</script>

<div id="test10">
  <button @click="showTime">显示时间</button>
  <p> Time : {{ showTime() }}</p>
</div>
<script type="text/javascript">
  var test10 = new Vue({
    el: "#test10",
    methods: {
      showTime: function () {
        var time = new Date(parseInt(Date.now()));
        var year = time.getFullYear();
        var month = time.getMonth() + 1;
        var day = time.getDay();
        var hour = time.getHours();
        var minute = time.getMinutes();
        var second = time.getSeconds();
        
        return year + '/' + month + '/' + day + ' ' + hour + ':' + minute + ':' + second;
      }
    }
  })
</script>

<ul id="example1">
  <li v-for="(item,index) in items">
   {{ DATA }} - {{ index }} - {{ item.message }}
  </li>
</ul>

<script type="text/javascript">
  var example1 = new Vue({
    el: '#example1',
    data: {
      DATA:'DATA',
      items: [
        {message: 'Item 1'},
        {message: 'Item 4'},
        {message: 'Item 2'},
        {message: 'Item 3'}
      ]
    }
  })
</script>

<div id="example2">
  <button v-on:click="counter += 1">点击</button>
  <p>你第 {{ counter }} 次点击了这个按钮.</p>
</div>
<script type="text/javascript">
  var example2 = new Vue({
    el: '#example2',
    data: {
      counter: 0
    } 
  })
</script>


<div id="example3">
  <button @click="greet">GREET</button>
</div>
<script type="text/javascript">
  var example3 = new Vue({
    el: '#example3',
    data: {
      time: new Date()
    },
    methods: {
      greet: function (event) {
        alert('Time' + this.time + '!')
      }
    }
  })
  example3.greet()
</script>


<div id="example4">
  <button @click.once="say('HI')">SAY HI</button>
  <button @click="say('WHAT')">SAY WHAT</button>
</div>
<script type="text/javascript">
  var example4 = new Vue({
    el: '#example4',
    methods: {
      say: function (message) {
          alert(message)
      }
    }
  })
</script>



<div id="example5">
  <button @click="warn('在内联语句处理器中访问原生 DOM 事件',$event)">Submit</button>
</div>
<script type="text/javascript">
  var example5 = new Vue({
    el:example5,
    methods :{
      warn: function (message,event) {
        if (event) {
          event.preventDefault()
        }
        alert(message)
      }
    }
  })
</script>



</body>
</html>
